<template>
  <q-scroll-area class="fit">
    <div class="q-pa-sm">
      <div class="row q-col-gutter-sm q-py-sm">
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <bar-chart></bar-chart>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <line-chart></line-chart>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <scatter-plot></scatter-plot>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <pie-chart></pie-chart>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <area-chart></area-chart>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <guage-chart></guage-chart>
        </div>
      </div>
    </div>
  </q-scroll-area>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

const PieChart = defineAsyncComponent(
  () => import('components/charts/PieChart.vue')
);
const ScatterPlot = defineAsyncComponent(
  () => import('components/charts/ScatterPlot.vue')
);
const LineChart = defineAsyncComponent(
  () => import('components/charts/LineChart.vue')
);
const BarChart = defineAsyncComponent(
  () => import('components/charts/BarChart.vue')
);
const AreaChart = defineAsyncComponent(
  () => import('components/charts/AreaChart.vue')
);
const GuageChart = defineAsyncComponent(
  () => import('components/charts/GuageChart.vue')
);
</script>

<style scoped></style>
